<style lang="scss" scoped>
.seek {
  header {
    padding: 0.06rem 0.15rem 0.06rem 0;
    & > div {
      height: 0.32rem;
    }
  }
  .tit {
    padding: 0.15rem;
  }
  .tags {
    span {
      display: inline-block;
      padding: 0.08rem 0.1rem;
      background: #f5f5f5;
      margin: 0 0.1rem 0.2rem 0;
    }
  }
}
</style>


<template>
  <div class="seek full flex-row">
    <header class="flex-col padding-r15">
      <div class="box1 bor-r bgfff padding-l10 margin-l15 flex-col flex-middle">
        <i class="iconfont icon-sousuo font-20"></i>
        <input type="text" class="box1 padding-lr10" v-model="seekText" :placeholder="titText">
        <div class="padding-lr10" v-show="seekText.length" @click="seekText = ''">
          <i class="iconfont icon-qingchu"></i>
        </div>
      </div>
      <div class="padding-l15 box-center" @click="seek">{{backText}}</div>
    </header>
    <main class="box1 bgfff">
      <div class="history">
        <div class="tit flex-col padding-l15">
          <div class="box1">历史搜索</div>
          <div class="padding-l15" v-show="historyList.length" @click="delHistory">
            <i class="iconfont icon-shanchu font-16"></i>
          </div>
        </div>
        <div class="tags padding-lr15">
          <span class="tag" v-for="(it,i) in historyList" :key="i" @click="toRouter('seek_end/'+it)">{{it}}</span>
          <div class="c82 font-12" v-show="!historyList.length">暂无搜索历史</div>
        </div>
      </div>

      <!-- 楼盘搜索 猜你喜欢 begin -->
      <div class="history" v-show="houseHistory">
        <div class="tit flex-col padding-l15">
          <div class="box1">猜你喜欢</div>
          <!-- <div class="padding-l15"><i class="iconfont icon-shouji"></i></div> -->
        </div>
        <div class="flex-col">
          <!-- <div class="padding-lr15 text-c">
                        <i class="iconfont icon-shouji"></i>
                        <div class="cred font-10 padding-t5">小区</div>
                    </div> -->
          <div class="tags padding-lr15 box1">
            <span class="tag" v-for="(it,i) in houseList" :key="i" @click="toRouter('houses_info/',{houseCode:it.housesCode})">{{it.housesName}}</span>
          </div>
        </div>
        <!-- <div class="flex-col">
                    <div class="padding-lr15 text-c">
                        <i class="iconfont icon-shouji"></i>
                        <div class="cred font-10 padding-t5">模块</div>
                    </div>
                    <div class="tags padding-lr15 box1">
                        <span class="tag">青山绿水</span>
                        <span class="tag">鸟语花香</span>
                        <span class="tag">世纪花园</span>
                    </div>
                </div> -->

      </div>
      <!-- 楼盘搜索 猜你喜欢 end -->

    </main>
  </div>
</template>

<script>
export default {
  name: "seek",
  data() {
    return {
      titText: "请输入关键字找楼盘",
      houseHistory: true,
      backText: "取消",
      seekText: "",
      historyList: [],
      houseList: [],
      hasId: 0
    };
  },
  watch: {
    seekText(val) {
      val.length ? (this.backText = "搜索") : (this.backText = "取消");
    }
  },
  mounted() {
    let that = this,
      _arr = [];
    this.$nextTick(() => {
      // 获取 对应的历史搜索记录

      if (parseInt(that.$route.params.id)) {
        that.hasId = 1;
        that.houseHistory = false;
        that.titText = "请输入关键字找客户";
        _arr = that.getCache("historySeekClient");
      } else {
        that.getHouseList();
        _arr = that.getCache("historySeek");
      }

      if (!_arr || !_arr.length) {
        _arr = [];
      }
      this.historyList = _arr;
    });
  },
  methods: {
    // 删除历史搜索
    delHistory() {
      if (this.hasId) {
        this.removeCache("historySeekClient");
        this.historyList = [];
      } else {
        this.removeCache("historySeek");
        this.historyList = [];
      }
    },
    // 搜索
    seek() {
      let that = this,
        list = this.historyList,
        val = this.seekText,
        timeSeek;
      if (!val.length) {
        this.back();
      } else {
        // 判断是否有值
        if (!list.includes(val)) {
          list.push(val);
          // 大于删除最后一个
          if (list.length > 6) {
            list.pop();
          }
        }

        // 保存历史搜索
        if (this.hasId) {
          that.setCache("historySeekClient", list);
        } else {
          that.setCache("historySeek", list);
        }

        that.$router.push({
          path: `/seek_end`,
          params: {
            id: that.hasId,
            text: that.seekText
          }
        });
      }
    },
    getHouseList(has = false) {
      let that = this;
      let page = this.hasPage(has); //需要分页
      if (!page) return;
      this.http
        .get("houses/list", {
          lng: that.getCache("point").lng || null,
          lat: that.getCache("point").lat || null,
          page: page,
          limit: that.limit
        })
        .then(res => {
          that.totalPage = res.totalPage;
          if (has) {
            that.houseList.push(res.data.list);
          } else {
            that.houseList = res.data.list;
          }
        });
    }
  }
};
</script>
